<template>
	<view class="index">
		<!-- 顶部搜索 -->
		<van-search
		  v-model="search_value"
		  shape="round"
		  style="width: 100%"
		  readonly
		  placeholder="请输入搜索关键词"
		/>
		
		<!-- 顶部轮播 -->
		<section class="swiper">
			<van-swipe class="my-swipe" :autoplay="3000" height="120" style="border-radius: 12rpx;" indicator-color="white">
			  <van-swipe-item v-for="(item,index) in swiper_list">
				  <img :src="item" alt="" style="width: 100%;">
			  </van-swipe-item>
			  
			</van-swipe>
		</section>
		
		<!-- 快速导航选项 -->
		<section class="activity-box">
			<view class="activity-option groupon-option" >
			    <view class="activity-name">
			        <span>所有商品</span>
			        <img src="/static/index/next_mini.png" style="width: 12rpx;height: 25rpx" alt="">
			    </view>
			    <view class="activity-desc"></view>
			</view>
			
			<view class="activity-option charge-option" >
			    <view class="activity-name">
			        <span>钱包充值</span>
			        <img src="/static/index/next_mini.png" style="width: 12rpx;height: 25rpx" alt="">
			    </view>
			    <view class="activity-desc">充3000送1000</view>
			</view>

		</section>
		
		<!-- 精选 -->
		<section class="hot-box">
			<view class="hot-title">
				<span class="hot-desc">热卖商品</span>
				<span class="hot-more">更多 ></span>
			</view>
			
			<view class="hot-content">
				<view class="hot-box" v-for="(item, index) in hot_list" :key="index">
					<view class="hot-tag">
						<img src="../../static/index/like-active.png" style="width: 30rpx" alt="">
						<span style="margin:0 20rpx">98</span>
					</view>
				    <img class="hot-img" :src="item.thumb" />
				</view>
			</view>

		</section>
		
		<TabBar></TabBar>
	</view>
</template>

<script setup>
	import TabBar from "../../components/TabBar.vue"
	import { ref } from "vue"
	const swiper_list =ref([
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ]); 
				const hot_list = [{
				        thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				    }, {
				        thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				    }, {
				        thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				    }, {
				        thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				    }, {
				        thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				    }]
					
				
</script>

<style lang="scss">
	.index{
		width: 100%;
		height: 100%;

		.swiper{
			width: 90%;
			margin: 20rpx auto;
		}
		
		.activity-box{
		    width: 90%;
		    height: 150rpx;
			margin: 40rpx auto;
		    display: flex;
		    flex-direction: row;
		    justify-content: space-between;
		    position: relative;
			
			.activity-option{
			    width: 50%;
			    height: 100%;
			    position: absolute;
			    top: 0;
				
				.activity-name,.activity-desc{
					width: calc(100% - 60rpx);
					margin: auto;
					font-size: 34rpx;
					color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.activity-name{
					margin-top: 20rpx
				}
				.activity-desc{
					font-size: 24rpx;
					margin-top: 10rpx
				}
			
			}
			.activity-option.groupon-option{
			    background: url("/static/index/groupon_option.png") no-repeat;
			    background-size: 100%;
			    left: 0
			}
			.activity-option.charge-option{
			    background: url("/static/index/charge_option.png") no-repeat;
			    background-size: 100%;
			    right: 0
			}
		}
		
		.hot-box{
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			.hot-title{
				width: 100%;
				height: 100rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.hot-desc{
					font-family: '微软雅黑';
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
				.hot-more{
					font-family: '微软雅黑';
					font-size: 26rpx;
					color: #999999
				}
			}
			
			.hot-content{
				width: 100%;
				height: 300rpx;
				display: flex;
				overflow-x: scroll;
				overflow-y: hidden;
				
				.hot-box{
					position: relative;
					height: 100%;
					.hot-tag{
						position: absolute;
						left: 0;
						bottom: 0;
						width: calc(100% - 20rpx);
						height: 50rpx;
						background: rgba(255,255,255,0.5);
						border-radius: 0px 0px 10px 10px;
						color: #333333;
						font-size: 24rpx;
						display: flex;
						align-items: center;;
						justify-content: flex-end;
					}
					.hot-img{
						max-height: 100%;
						margin-right: 20rpx;
						object-fit: contain;
						border-radius: 20rpx;
						
					}
				}
				
			}
			
			
		}
		
	}

</style>

